<template>
  <view class="" style="height: 100vh; background-color: #ffffff">
    <!-- 头部 -->
    <!-- <view class="">
      <view class="uni-page-head" v-if="titleFlag">
        <image
          class="common-title-img"
          style="left: 20rpx"
          :src="require('../../static/imges/fanhui.png')"
          @click="back()"
        ></image>
        <view class="common-title-img">
						<u-icon name="arrow-right" color="#FFFFFF" width="20rpx" height="20rpx" size="48" @click="back()"></u-icon>
					</view> 
        <view class="uni-page-head-title"> 辅材-赋码贴签 </view>
      </view>
      <view v-if="titleFlag" style="margin-top: 98rpx">
        这个盒子是用来撑空间，又不想改变下边的body盒子 所以在这加了一个空盒子，可以根据新老MOA判断 
      </view>
    </view> -->
    <view class="" style="padding: 10rpx; background: #ffffff">
      <view class="contentTitle" style="height: 80rpx">
        <image
          style="width: 45rpx; height: 40rpx; margin-bottom: -5px"
          src="../../static/imges/wendang3.png"
          mode=""
        ></image>
        物资信息
      </view>
      <view class="item">
        <text class="itemLeft">标签ID</text>
        <text class="itemRight">{{ labelId }}</text>
      </view>
      <view class="item">
        <text class="itemLeft"><text class="xing">*</text>物料种类</text>
        <text class="itemRight">{{ placeholder1 }}</text>
        <!-- <uni-combox :candidates="candidates" :placeholder="placeholder1 || '请选择物料种类'" @input="checkboxChange" v-model="city"></uni-combox> -->
        <!-- <text class="itemRight">{{placeholder1}}</text> -->
      </view>
      <view class="item">
        <text class="itemLeft"><text class="xing">*</text>物料分级分类</text>
        <!-- <text style="width: 70%;" @click="show = true">21A05SDLY0901057</text> -->
        <input
          class="itemRight"
          @click="classifyClick"
          type="text"
          placeholder="请选择物料分级分类"
          v-model="classify"
          disabled
        />
        <u-select
          value-name="catCode"
          label-name="catName"
          v-model="show"
          mode="mutil-column-auto"
          z-index="666"
          :list="list"
          @confirm="confirm"
          style="position: relative"
        ></u-select>
        <!-- 分级分类卡片三级展示 -->
        <view class="cardStyle" v-show="show" style="">
          <view class="" style="width: 60%; height: 100%">
            <view
              class=""
              v-for="(item, index) in materialCard"
              :key="item"
              style=""
            >
              <text>{{ item }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="item">
        <text class="itemLeft"><text class="xing">*</text>物料名称</text>
        <!-- <text @click="show1 = true">21A05SDLY0901057</text> -->
        <input
          class="itemRight"
          v-show="!materialName"
          @click="open"
          type="text"
          placeholder="请选择物料名称"
          v-model="materialName"
          disabled
        />
        <text class="itemRight" v-show="materialName" @click="open">{{
          materialName
        }}</text>
        <!-- <u-select height="auto" v-model="show1" value-name="catCode" label-name="catName" mode="mutil-column-auto" :list="materialNameTypeList" @confirm="confirm"></u-select> -->
        <!-- <text @click="show1 = true" style="display: inline-block;width: 70%;">{{materialName}}</text> -->
      </view>
      <view class="item">
        <text class="itemLeft"><text class="xing">*</text>物料编码</text>
        <input
          class="itemRight"
          disabled
          type="text"
          placeholder="请选择物料编码"
          v-model="materialCode"
          @click="open"
        />
      </view>
    </view>
    <!-- <picker @change="bindPickerChange" :value="index" :range="array">
			<view class="uni-input">{{array[index]}}</view>
		</picker> -->
    <!-- <button @click="open">打开弹窗</button> -->
    <uni-popup ref="popup" style="height: 100px">
      <view style="background-color: #fff">
        <span class="off" @click="close">X</span>
        <view class="h1">
          <span>物料名称</span>
        </view>
        <view class="top">
          <input
            class="t-c1"
            type="text"
            placeholder="请输入物料名称查询"
            v-model="searchName"
          />
          <input
            class="t-c2"
            type="text"
            placeholder="请输入物料编码查询"
            v-model="searchCode"
          />
        </view>
        <view style="text-align: center; margin-top: 10px">
          <span style="font-weight: bold">请选择</span>
          <u-line :hair-line="false" color="black" />
        </view>
      </view>
      <scroll-view
        style="
          height: 250px;
          background-color: #fff;
          border: 1px solid #e4e4e4;
          border-width: 5px 0;
        "
        class=""
        :scroll-y="true"
      >
        <view
          style="margin: 5px 0; padding-left: 5px; background-color: #f2f2f2"
          class=""
          v-for="(item, index) in materialNameTypeList"
          v-show="itemShow(item)"
          :key="item.catCode"
          @click="
            materialName = item.catName;
            materialCode = item.catCode;
            close();
          "
        >
          <view class="">
            {{ item.catName }}
          </view>
          <view style="color: #f0ad4e"> 物料编码：{{ item.catCode }} </view>
        </view>
      </scroll-view>
    </uni-popup>
    <!-- 红色提示文字 -->
    <view
      class=""
      v-show="redTipShow"
      style="
        text-align: center;
        color: #d9001b;
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
      "
    >
      {{ "请先选择【" + this.redTip + "】" }}
    </view>
    <!-- <button type="default" @click="ceshiFuction()">点击选择物料</button> -->
    <view class="buttonBox">
      <button v-debounce="onOk(1)" 
            type="warn" style="font-size: 28rpx; width: 48%;">
        确认
      </button>
      <button v-debounce="onOk(2)"
             type="warn" style="font-size: 28rpx; width: 48%;">
        取消
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchName: "",
      searchCode: "",
      prjId: "",
      serviceCode: "",
      labelId: "",
      titleFlag: true,
      redTip: "", //红色提示文字
      redTipShow: false,
      candidates: [
        "变压器",
        "简易塔",
        "楼面抱杆",
        "砖混房屋",
        "10KV电力电缆",
        "1KV以下电力电缆",
      ],
      city: "",
      placeholder1: "",
      show: false,
      show1: false,
      classify: "", //分级分类
      materialName: "", //物料名称
      materialCode: "", //物料编码
      materialType: "", //物料种类
      materialNameTypeList: [], //筛选后物料编码，种类的数组
      materialCloneLists: [], //复制请求的数据
      materialTypeList: [
        { label: "变压器", value: "01240501" },
        { label: "简易塔", value: "010103" },
        { label: "楼面抱杆", value: "010202" },
        { label: "砖混房屋", value: "01210101" },
        { label: "10KV电力电缆", value: "01610101" },
        { label: "1KV以下电力电缆", value: "01610102" },
      ],
      // array: ['中国', '美国', '巴西', '日本'],
      // index: 0,
      list: [],
      materialCard: [],
      materialCardList: [
        //分级分类弹框卡片三级展示
        {
          label: "变压器",
          value: [
            "一级（板块）：工程物资",
            "二级（大类）：电力引入设备",
            "三级（中类）：变压/稳压设备",
            "四级（小类）：变压器",
          ],
        },
        {
          label: "简易塔",
          value: [
            "一级（板块）：工程物资",
            "二级（大类）：地面塔",
            "三级（中类）：简易塔",
          ],
        },
        {
          label: "楼面抱杆",
          value: [
            "一级（板块）：工程物资",
            "二级（大类）：楼面塔",
            "三级（中类）：楼面抱杆",
          ],
        },
        {
          label: "砖混房屋",
          value: [
            "一级（板块）：工程物资",
            "二级（大类）：基站机房",
            "三级（中类）：基站机房",
            "四级（小类）：砖混房屋",
          ],
        },
        {
          label: "10KV电力电缆",
          value: [
            "一级（板块）：工程物资",
            "二级（大类）：通用工程物资",
            "三级（中类）：电力电缆",
            "四级（小类）：10KV电力电缆",
          ],
        },
        {
          label: "1KV以下电力电缆",
          value: [
            "一级（板块）工程物资：",
            "二级（大类）：通用工程物资",
            "三级（中类）：电力电缆",
            "四级（小类）：1KV以下电力电缆",
          ],
        },
      ],
    };
  },
  onLoad(option) {
    this.prjId = option.prjId || "";
    this.labelId = option.labelId || "";
    this.placeholder1 = option.prjName || ""; // 物料种类
    this.checkboxChange(this.placeholder1); // 调接口
  },
  methods: {
    itemShow(item) {
      let flagName = true;
      let flagCode = true;
      if (this.searchName != "" && item.catName.indexOf(this.searchName) < 0) {
        flagName = false;
      }
      if (this.searchCode != "" && item.catCode.indexOf(this.searchCode) < 0) {
        flagName = false;
      }
      return flagName && flagCode;
    },
    open() {
      this.searchName = "";
      this.searchCode = "";
      if (!this.materialType || !this.classify) {
        this.redTip = "物料分级分类";
        this.redTipShow = true;
        return;
      }
      this.$refs.popup.open("bottom");
    },
    close() {
      this.$refs.popup.close();
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 物料种类选择触发
    checkboxChange(value) {
      this.redTipShow = false; // 隐藏红色文字
      let that = this;
      setTimeout(() => {
        that.placeholder1 = value;
        that.city = "";
      });
      this.materialTypeList.forEach((item) => {
        if (item.label == value) {
          //种类编码
          this.materialType = item.value;
        }
      });
      this.materialCardList.forEach((item) => {
        if (item.label == value) {
          this.materialCard = item.value;
        }
      });
      this.getWuliaoList();
      this.reset();
    },
    // 重置清空
    reset() {
      this.classify = "";
      this.materialName = "";
      this.materialCode = "";
    },
    // 点击物料分级分类
    classifyClick() {
      if (!this.materialType) {
        this.redTip = "物料种类";
        this.redTipShow = true;
        return;
      }
      this.show = true;
    },
    // 选择物料分级分类后触发
    confirm(value) {
      this.materialName = ""; //重置物料名称
      this.materialCode = ""; //重置物料编码
      this.redTipShow = false; //隐藏红色文字
      this.searchName = "";
      this.searchCode = "";
      console.log("点击确定按钮", value);
      // 赋值给物料分级分类表单
      this.classify = value
        .map((item, index) => {
          return item.label;
        })
        .join("-");

      // 筛选赋值给 物料名称物料编码数组
      this.materialCloneLists.forEach((item) => {
        if (item.catCode == value[0].value) {
          if (value.length == 1) {
            this.materialNameTypeList = item.children;
          } else if (value.length == 2) {
            item.children.forEach((item1) => {
              if (item1.catCode == value[1].value) {
                this.materialNameTypeList = item1.children;
              }
            });
          } else{
              console.log(11111)
          }
        }
      });
      // console.log(99999999999,this.materialNameTypeList)
    },
    // 将请求到的数据进行筛选调整
    dataFilter(materialLists, code) {
      if (materialLists[0].children[0].children === null) {
        this.dataFilterOne(materialLists, code);
      } else if (materialLists[0].children[0].children[0].children === null) {
        this.dataFilterTwo(materialLists);
      } else{
          console.log("筛选数据", this.list, 111111, materialLists);
      }
      console.log("筛选数据", this.list, 111111, materialLists);
    },
    dataFilterOne(materialLists, code){
      this.list = materialLists.map((item) => {
        if (code == "01610101") {
          if (item.catCode == "0161010101") {
            return { ...item, children: null };
          }
        } else if (code == "01610102") {
          if (item.catCode == "0161010201") {
            return { ...item, children: null };
          }
        } else {
          return { ...item, children: null };
        }
      });
    },
    dataFilterTwo(materialLists){
      this.list = materialLists.map((item, index) => {
        let children = item.children.map((item1, index1) => {
          return { ...item1, children: null };
        });
        return { ...item, children };
      });
    },
    // 请求接口
    getWuliaoList() {
      console.log("出发");
      uni.showLoading({
        title: "加载中...",
        mask: true
      });
      let that = this;
      uni.request({
        // url:
        //   uni.getStorageSync("url") +
        //   "/pms/app/complete/queryAuxCategoryList?prjId=" +
        //   this.prjId +
        //   "&categoryType=" +
        //   this.materialType,
        url:
        uni.getStorageSync("PMS20url") +
          "/api/app/auxMaterial/queryAuxCategoryList?prjId=" +
          this.prjId +
          "&categoryType=" +
          this.materialType,
        method: "GET",
        dataType: "json",
        timeout: 10000 * 60,
        header: {
          "sysToken": uni.getStorageSync("PMStoken"),
        },
        data: {},
        success: (res) => {
          uni.hideLoading();
          console.log("获取项目列表数据:", res);
          var data = res.data;
          if (data.code == "200") {
            this.materialCloneLists = data.data;
            this.dataFilter(data.data, that.materialType);
          } else {
            uni.showModal({
              title: "温馨提示",
              content: JSON.stringify(data),
              showCancel: false,
              confirmColor: '#eb4b4b',
            });
          }
          uni.hideLoading();
          uni.stopPullDownRefresh();
        },
        fail: (data, code) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          console.log("fail" + JSON.stringify(data));
        },
      });
    },
    // 贴签赋码接口
    codeLabeling() {
      uni.request({
        // url:
        //   uni.getStorageSync("url") +
        //   "/pms/app/complete/auxAssignCode?prjId=" +
        //   this.prjId +
        //   "&categoryCode=" +
        //   this.materialCode +
        //   "&labelId=" +
        //   this.labelId +
        //   "&isFromPhoto=1&categoryType=" +
        //   this.materialType,
        url:
        uni.getStorageSync("PMS20url") +
          "/api/app/auxMaterial/auxAssignCode?prjId=" +
          this.prjId +
          "&categoryCode=" +
          this.materialCode +
          "&labelId=" +
          this.labelId +
          "&isFromPhoto=1&categoryType=" +
          this.materialType,
        method: "POST",
        dataType: "json",
        timeout: 10000 * 60,
        header: {
          "sysToken": uni.getStorageSync("PMStoken"),
        },
        data: {},
        success: (res) => {
          uni.hideLoading();
          var data = res.data;
          if (data.code == "200") {
            uni.showToast({
              title: "赋码贴签成功",
              duration: 1000,
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          } else {
            uni.showModal({
              title: "温馨提示",
              content:
                data.message ,
              showCancel: false,
                confirmColor: '#eb4b4b',
            });
          }
          uni.hideLoading();
          uni.stopPullDownRefresh();
        },
        fail: (data, code) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          console.log("fail" + JSON.stringify(data));
          uni.showModal({
            title: "温馨提示",
            content: "接口请求错误",
            showCancel: false,
              confirmColor: '#eb4b4b',
          });
        },
      });
    },
    onOk(num) {
      if (num == 1) {
        this.codeLabeling(); //请求接口
      } else if (num == 2) {
        uni.navigateBack({
          delta: 1,
        });
      } else{
          console.log(11111)
      }
    },
  },
};
</script>

<style>
@import "@/common/common-ui.css";
</style>
<style scoped lang="scss">
.off {
  position: absolute;
  font-size: 20px;
  font-weight: 900;
  right: 20px;
  top: 10px;
}
.h1 {
  display: flex;
  justify-content: space-around;
  span {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
  }
}
.top {
  display: flex;
  justify-content: space-around;
  .t-c1,
  .t-c2 {
    border: 1px solid black;
    margin-top: 20px;
    background: #fff;
    //color: #cccc;
    // width: 200px;
    height: 30px;
    // margin-right: 90px;
    font-size: 24rpx;
    padding-left: 10px;
  }
}

.contentTitle {
  height: 80rpx;
  display: flex;
  align-items: center;
  padding-left: 40rpx;
  border: 1px solid #e4e4e4;
}
.item {
  border: 1px solid #e4e4e4;
  margin-top: 5rpx;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  .itemLeft {
    display: inline-block;
    width: 30%;
    .xing {
      color: red;
    }
  }
  .itemRight {
    // color: #9999B3;
    font-size: 28rpx;
    width: 70%;
  }
}
.buttonBox {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  background-color: #ffffff;
}
.cardStyle {
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 999;
  top: 50px;
  right: 0;
  color: #6e6e6e;
  border-radius: 0 0 10px 10px;
  background: #fff;
  padding: 5px 0;
}
</style>
